<template>
  <!-- 秒杀组件 -->
  <div class="msbg">
    <div class="flex-s-s  top" v-if="isTitle">
			<div class="topleft">
				<span class="fs-32 fw-600 color-group mr-10 ">超值拼团</span>
			</div>
			<div class="topright flex rightbg" @click="gomore()" >
				<span class="fs-24 color-group mr-5">查看更多</span>
				<svg-icon icon-class="right" class="fs-22 mt-20 color-group" @goPage="gomore()"/>
			</div>
		</div>
		<div class="bg-white ml-5 mr-5 br-16">
			<div class="info" v-for="(item,index) in info" :key="index">
				<imgBox :img-url="item.ThumbnailUrl410"  class="is-216 br-12 picimg" />
				<div class="inforight">
					<p class="infoname">{{ item.ProductName }}</p>		
					<div>
							<div class=" specall " v-for="(iitem,index) in item.TagsList" :key="index" >
								<div class="spec ">{{ iitem.TagName }}</div>
							</div>
							<div class="solidheight" v-if="item.TagsList.length === 0"></div>
					</div>		 
					<div class="fs-28 originprice" v-if="item.MarkePrice != 0">￥{{ item.MarkePrice }}</div>			
					<div class="flex">
						<div class="pin">{{ item.GroupCount }}人团</div>
						<div class="cssSaleMinPrice">
							<span class="fs-24 color-primary">￥</span>
						  <span class="fs-40 fw-b color-primary mr-5">{{ item.GroupPrice }}</span>
						</div>
					</div>	
						
					<div class="color-dark fs-20 mt-12">距结束：{{item.Days}}天{{item.Hours}}时{{item.Minutes}}分{{item.Seconds}}秒</div>
					<div class="msbtn" @click="goaction(item)">立即参团</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
import cookies from 'vue-cookies'
import imgBox from 'components/imgBox';
export default {
	components: {imgBox},
  name: 'Seckill',
  props: {
    info: {
      type: Array,
			default:[]
    },
		storeId:{
			type:String,
			default:''
		},
		isTitle:{
			type:Boolean,
			default: true
		},
  },
  data() {
    return {
      
    }
  },
  methods: {
 		//查看更多
		 gomore(){
			//window.location.href = this.$LocalDomain + '/m/retail/GroupIndex?storeId='+this.storeId+'&hideStore='+1
			window.location.href = this.$LocalDomain + '/circle/#/grouplist/1?storeId='+this.storeId+'&hideStore='+1
		},
		//立即拼团
		goaction(item){
			let id = item.ProductId
			let store_id = item.StoreId
			//window.location.href = this.$LocalDomain + '/m/retail/productdetail?id='+id+'&groupType='+0+'&navStoreId='+store_id
			window.location.href = this.$LocalDomain + '/circle/#/quickPlaceOrder/retailDetail/'+ id + '?storeId='+store_id
		}
  }
}
</script>

<style lang="scss" scoped>
//秒杀
.msbg{
	background:linear-gradient(to bottom,#FFE69D ,#FFE499);
	border-radius: 16px;
	box-shadow: 0 4px 14px  #fff4ed;
	padding-bottom: 5px;	
	padding-top: 24px;
	.top{
		height: 50px;
		line-height: 50px;
		margin-left: 24px;
		margin-right: 24px;
		margin-bottom: 50px !important;
		//padding-top: 24px;

	}
	.rightbg{
		padding-left: 20px;
		padding-right: 15px;
		height: 60px;
		line-height: 60px;
		border-radius: 29px;
		background: #fff2ce;
		margin-top: -2px;
	}
	.rigthimg{
		width: 20px;
		height: 20px;
		margin-top: 10px;		
	}
}
.info{

	border-radius: 16px;
	height: 264px;
	padding: 24px;
	display: flex;
	.picimg{
		flex: 1;		
	}
}
.inforight{
	position: relative;
	margin-left: 24px;
	display: flex;
  flex-direction: column;
	justify-content: space-between;
	height: 216px;
	.infoname{
		font-size: 26px;
		font-weight: 700px;
		width: 406px;
		height: 34px;  
		-webkit-box-orient: vertical;
		-webkit-line-clamp:1;
		text-overflow:ellipsis;
		overflow: hidden;
		white-space:nowrap;
	}
	.specall{
		display: inline-flex;		
	}
	.spec{
		background: #FEF8E1 ;
		border-radius: 8px;
		color: #FE8000;
		text-align: center;
		font-size: 22px;
		margin-right: 15px;
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
	}

	.originprice{
		text-decoration:line-through;
		color: #B2B2B2;
	}
	.msbtn{
		position: absolute;
		bottom: 0;
		right: -5px;
		background:linear-gradient(to right,#FE8224,#FF460A);
		width: 110px;
		height: 50px;
		line-height: 50px;
		border-radius: 16px;
		text-align: center;
		box-shadow: 0px 4px 14px #fff4ed;
		font-size: 24px;
		color: white;
	}
}
.solidheight{
		height: 40px;
		width: 100%;
}
.pin{
	background: linear-gradient(to right,#FF423A,#FF9130);
	height: 32px;
	line-height: 32px;
	color: white;
	border-top-left-radius: 3.6px;
	border-top-right-radius: 180px;
	border-bottom-right-radius: 180px;	
	border-bottom-left-radius: 3.6px;
	font-size: 22px;
	font-weight: 500;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
.cssSaleMinPrice{
	margin-top: -15px;
	margin-left: 10px;
}

</style>

